<template>
  <div class="Newest">
    <div class="btns">
      <el-button
        class="songBtn"
        :id="toggleBtn ? 'toggleBtn' : ''"
        round
        v-remove-focus
        @click="pushChildRouter('/view/find/newest/newsong', '新歌速递')"
        >新歌速递</el-button
      >
      <el-button
        class="albumBtn"
        :id="toggleBtn ? '' : 'toggleBtn'"
        round
        v-remove-focus
        @click="pushChildRouter('/view/find/newest/newalbum', '新碟上架')"
        >新碟上架</el-button
      >
    </div>

    <router-view
      class="router"
      @getAlbumlistId="pushAlbumlistPage"
      @getSongerDetailInfo="pushSongerDetailPage"
    ></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      toggleBtn: true,
    }
  },
  created() {
    this.keepRouterHighlight()
    this.keepButtonHighlight()
  },
  methods: {
    // 保持状态栏高亮
    keepRouterHighlight() {
      const active = '6'
      this.$emit('keepRouterHighlight', active)
    },
    // 跳转到子路由
    pushChildRouter(path, pagename) {
      if (this.$route.path != path) {
        this.$router.push({
          path: path + '?thePage=' + pagename,
        })
        this.toggleBtn = !this.toggleBtn
      }
    },
    // 保持按钮高亮
    keepButtonHighlight() {
      if (this.$route.path == '/view/find/newest/newsong') {
        return (this.toggleBtn = true)
      }
      return (this.toggleBtn = false)
    },

    /**
     * 以下为子传父处理函数
     */
    // 传递歌手信息
    pushSongerDetailPage(data) {
      this.$emit('getSongerDetailInfo', data)
    },
    // 传递专辑信息
    pushAlbumlistPage(data) {
      this.$emit('getAlbumlistId', data)
    },
  },
}
</script>

<style lang="less" scoped>
.Newest {
  position: relative;
}
.btns {
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  border: 1px solid #c5c6ca;
  border-radius: 20px;
  width: 300px;
  height: 36px;
  overflow: hidden;
  /deep/ .el-button {
    padding: 10px 48px;
    margin: 0;
    border: 0;
    font-weight: bold;
    font-size: 16px;
  }
  .songBtn {
    position: absolute;
    left: 0px;
    z-index: -2;
  }
  .albumBtn {
    position: absolute;
    right: 0px;
    z-index: -2;
  }
  #toggleBtn {
    background-color: #bbbbbb;
    color: white;
    z-index: -1;
  }
}

.router {
  margin-top: 80px;
}
</style>